<template>
    <div class="home">
        <header>
            <van-icon name="scan" class="scan" size=".48rem" @click="scan"/>
            <form action="/" class="search">
              <van-search placeholder="请输入商品关键词" v-model="searchValue" class="search" shape="round" @keypress="searchKeyWord"/>
            </form>
            <van-icon :name="$img('QRcode.png')" @click="getRoutePath" class="code" size=".48rem"/>
        </header>
        <!-- 通知栏 -->
        <notice></notice>
        <!-- banner -->
        <div class="banner">
          <van-swipe :autoplay="3000" indicator-color="white" class="swipe">
            <van-swipe-item v-for="(item, index) in banner" :key="index" @click="toA(item.id)">
              <van-image :src="item.pic">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- Grid -->
        <div class="grid">
          <van-swipe :show-indicators="true" :loop="false" indicator-color="red" class="grid_swipe">
            <van-swipe-item>
              <van-grid square>
                <van-grid-item
                  v-for="(item, index) in menus1"
                  :key="index"
                  :icon="item.pic"
                  :text="item.name"
                  @click="toNext(item.wap_url)"
                />
              </van-grid>
            </van-swipe-item>
            <van-swipe-item v-if="menus2.length > 0">
              <van-grid square>
                <van-grid-item
                  v-for="(item, index) in menus2"
                  :key="index"
                  :icon="item.pic"
                  :text="item.name"
                  @click="toNext(item.wap_url)"
                />
              </van-grid>
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 推荐 -->
        <div class="recommend" v-if="activity.length > 0">
          <div>
            <div class="recommend_item">
              <p>{{activity[0].title}}</p>
              <div class="recommend_item_content">
                <div><img :src="activity[0].pic"></div>
                <div><img :src="activity[0].pic2"></div>
              </div>
            </div>
            <div class="recommend_item">
              <p>{{activity[1].title}}</p>
              <div class="recommend_item_content">
                <div><img :src="activity[1].pic"></div>
                <div><img :src="activity[1].pic2"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 小视频 -->
        <div class="videos">
          <div class="videos_header">
            <div>小视频</div>
            <div></div>
            <!-- <div>更多<van-icon name="arrow" size=".3rem"/></div> -->
          </div>
          <div class="video_scroll">
            <div class="videos_item">
              <div v-for="(item, index) in socialVideo" :key="index" @click="toVideoDetail(item.id)">
                <h3 class="videos_title">{{item.content}}</h3>
                <div class="video"><van-icon name="play" size=".58rem" class="play_icon"/><img :src="item.cover"></div>
                <div class="video_comment">
                  <span class="video_user">{{item.author.nickname}}</span>
                  <span class="comment">{{item.comment_count}}评论</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="like">
          <h3>
            <span>猜你喜欢</span>
            <span @click="refreshLike"><van-icon name="replay" size=".3rem" class="re"/>刷新</span>
          </h3>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
            :offset="100"
            class="like_contant">
            <div class="like_left">
              <div class="like_item" v-for="(item, index) in goodList1" :key="index" @click="toDetail(item.id)">
                <van-image :src="item.image" width="3.52rem" height="3.52rem" class="product_img">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20"/>
                  </template>
                  <template v-slot:error>加载失败</template>
                </van-image>
                <div class="product_title">{{item.store_name}}</div>
                <div class="product_price">
                  <span>￥{{item.price}}</span>
                  <span>已售 {{item.ficti}}</span>
                </div>
              </div>
            </div>
            <div class="like_right">
              <div class="like_item" v-for="(item, index) in goodList2" :key="index" @click="toDetail(item.id)">
                <van-image :src="item.image" width="3.52rem" height="3.52rem" class="product_img">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20"/>
                  </template>
                  <template v-slot:error>加载失败</template>
                </van-image>
                <div class="product_title">{{item.store_name}}</div>
                <div class="product_price">
                  <span>￥{{item.price}}</span>
                  <span>已售 {{item.ficti}}</span>
                </div>
              </div>
            </div>
          </van-list>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      banner: [],
      menus1: [],
      menus2: [],
      activity: [],
      socialVideo: [],
      goodList1: [],
      goodList2: [],
      searchValue: '',
      page: 0,
      last_page: 100
    }
  },
  methods: {
    onLoad () {
      if (this.goodList1.length + this.goodList2.length < 10) {
        this.finished = true
        return false
      }
      // 异步更新数据
      setTimeout(() => {
        if (this.page >= this.last_page) {
          this.finished = true
          return
        }
        this.page++
        this.loading = true
        this.$axios.get('/api/userLikeProduct', {
          page: this.page,
          num: 10
        }).then(res => {
          this.last_page = res.data.last_page
          for (let i in res.data.data) {
            i % 2 === 0 ? this.goodList1.push(res.data.data[i]) : this.goodList2.push(res.data.data[i])
          }
          this.loading = false
          this.finished = true
        })
      }, 1000)
    },
    getIndexData () {
      this.$axios.get('/api/index').then(res => {
        this.banner = res.data.banner
        this.activity = res.data.activity
        this.socialVideo = res.data.socialVideo
        this.goodList = res.data.goodList
        for (let i in res.data.menus) {
          i < 4 ? this.menus1.push(res.data.menus[i]) : this.menus2.push(res.data.menus[i])
        }
        for (let i in res.data.goodList.data) {
          i % 2 === 0 ? this.goodList1.push(res.data.goodList.data[i]) : this.goodList2.push(res.data.goodList.data[i])
        }
      })
    },
    toA (id) {
      console.log(id)
    },
    refreshLike () {
      this.finished = false
      this.loading = false
      this.page = 1
      this.$axios.get('/api/userLikeProduct', {
        page: 1,
        num: 10
      }).then(res => {
        this.goodList1 = []
        this.goodList2 = []
        for (let i in res.data.data) {
          i % 2 === 0 ? this.goodList1.push(res.data.data[i]) : this.goodList2.push(res.data.data[i])
        }
      })
    },
    toNext (url) {
      if (url && url !== '') {
        this.$router.push(url)
      } else {
        this.$dialog({ message: '敬请期待' })
        return false
      }
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    },
    searchKeyWord (event) {
      if (event.keyCode === 13) {
        event.preventDefault()
        this.$router.push({ name: 'allgoods', params: { key: this.searchValue } })
      }
    },
    getRoutePath () {
      this.$router.push({
        path: '/user/poster'
      })
    },
    toVideoDetail (id) {
      this.$router.push(`/societyvideo/${id}`)
    },
    scan () {
      this.$wxScan().then(res => {
        console.log(res)
      })
    }
  },
  created () {
    if (this.$store.state.pl === 'IOS') {
      window.iosCallHandler('setBarTintColor', '224,38,27')
    } else if (this.$store.state.pl === 'ANDROID') {
      AndroidJsBridge.setStatusBar('#E0261B', 1)
    }
    this.getIndexData()
  }
}
</script>

<style lang="scss">
.home{
  background: #f6f6f6;
  header{
    padding: .14rem .32rem;
    font-size: .24rem;
    color: #666666;
    background: #E0261B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan, .code{
        width: .44rem;
        height: .44rem;
        color: #ffffff;
    }
    .search{
        width: 5.36rem;
        height: .6rem;
        padding: 0;
        background: #E0261B !important;
        &>*{
            // background: #ffffff;
            width: 100%;
            border-radius: .36rem;
            height: .6rem;
        }
    }
    .van-cell__value--alone{
      display: flex;
    }
  }
  .banner{
    height: 2.74rem;
    padding: .16rem;
    border-radius: .16rem;
    .swipe{
      height: 100%;
      color: #000000;
    }
  }
  .grid_swipe{
    & .van-grid-item{
      flex-basis: 25% !important;
      padding-top: 20% !important;
      &>div{
        background: #f6f6f6 !important;
      }
    }
    .van-swipe__indicator{
      background-color: #6c6c6c;
    }
    .van-swipe__indicators{
      bottom: 0;
    }
    .van-swipe-item{
      // height: 3rem !important;
    }
    .van-grid-item__text{
      font-size: .24rem;
    }
    .van-icon__image{
      width: .8rem;
      height: .8rem;
    }
  }
  .recommend{
    margin: 0 .08rem;
    padding: .24rem .16rem;
    background: #ffffff;
    &>div{
      display: flex;
      justify-content: space-around;
      align-items: center;
      .recommend_item{
        p{
          color: #000000;
          font-size: .32rem;
          font-weight: 700;
          margin: 0 0 .16rem;
        }
        .recommend_item_content{
          display: flex;
          div{
            width: 1.6rem;
            height: 1.6rem;
            background: #E0261B;
            img{
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
          div:first-child{
            margin-right: .12rem;
          }
        }
      }
    }
  }
  .videos{
    height: 5.1rem;
    padding: .18rem .16rem 0;
    margin: .18rem .16rem;
    background: #ffffff;
    border-radius: .08rem;
    .videos_header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .18rem;
      div:first-child{
        font-size: .32rem;
        font-weight: 700;
        color: #000000;
      }
      div:last-child{
        font-size: .24rem;
        color: #999999;
        display: flex;
        align-items: center;
      }
    }
    .video_scroll{
      overflow: auto;
    }
    .videos_item{
      width: 4.48rem;
      display: flex;
      &>div{
        margin-right: .1rem;
      }
      h3{
        color: #333333;
        font-size: .28rem;
        margin-bottom: .18rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: .76rem;
      }
      .video{
        width: 4.4rem;
        height: 2.58rem;
        margin: 0  auto .18rem;
        background: #2E82FA;
        position: relative;
        .play_icon{
          border-radius: 100%;
          background: #ffffff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
        }
        img{
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .video_comment{
        display: flex;
        font-size: .24rem;
        color: #999999;
        span:last-child{
          margin-left: .4rem;
        }
      }
    }
  }
  .like{
    margin-top: .32rem;
    padding: 0 .16rem;
    h3{
      padding: 0 .16rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .16rem;
      span:first-child{
        color: #000000;
        font-size: .32rem;
        font-weight: 700;
      }
      span:last-child{
        color: #999999;
        font-size: .24rem;
        display: flex;
        align-items: center;
        .re{
          margin-right: .1rem;
        }
      }
    }
    .like_contant{
      background: #f6f6f6;
      // display: flex;
      .like_left, .like_right{
        display: inline-block;
      }
      .like_left{
        margin-right: .14rem;
      }
      .like_right{
        vertical-align: top;
      }
      .like_item{
        width: 3.52rem;
        border-radius: .16rem;
        background: #ffffff;
        padding: 0 0 .24rem;
        margin-bottom: .16rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .product_img{
          font-size: .32rem;
          margin-bottom: .12rem;
        }
        .product_title{
          box-sizing:border-box;
          font-size: .24rem;
          color: #000000;
          line-height: .34rem;
          max-height: .68rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 0 auto .16rem;
          padding: 0 .16rem;
          width: 100%;
        }
        .product_price{
          display: flex;
          justify-content: space-between;
          align-items: center;
          // margin: 0 auto;
          padding: 0 .16rem;
          span:first-child{
            color: #fe0000;
            font-size: .28rem;
            font-weight: 700;
          }
          span:last-child{
            color: #999999;
            font-size: .24rem;
          }
        }
      }
    }
  }
}
</style>
